
// ???

@mixin big-title {
  font-weight: 900;
  font-size: 34px;
  margin: 1.4em 0;

  a:hover {
    color: $link-color;
  }
}

@mixin title { // won't give margins
  font-weight: $font-weight-bold;
  font-size: $font-size-title;
}

@mixin link-normal {
  @include hover-underline;
  color: $link-color;
}

@mixin link-subtle { // TODO: search for link-color-dark
  color: $link-color-dark;

  &:hover {
    color: $link-color;
  }
}

@mixin link-dark-bg {
  @include hover-underline;
  color: $blue-highlight-color;
}

@mixin text-dark-bg {
  color: #fff;

  a {
    @include link-dark-bg;
  }
}

@mixin control-focus-border {
  &:focus {
    outline: 0; // reset browser default
    border: 1px solid $control-border-color-dark;
  }
}

@mixin docs-group-title {
  color: $font-color-weak;
  text-transform: uppercase;
}

@mixin raised-card {
  border: 1px solid $control-border-color-light;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  background: #fff;
}

@mixin raised-card-subtle {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
  background: #fff;
}

// ???

@mixin clearfix {
  &:before,
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin hover-underline { // used on the <a> tag
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

@mixin right-triangle($width, $height, $color) {
  border-style: solid;
  border-width: ($height / 2) 0 ($height / 2) $width;
  border-color: transparent transparent transparent $color;
}

@mixin down-triangle($width, $height, $color) {
  border-style: solid;
  border-width: ($height) ($width / 2) 0 ($width / 2);
  border-color: $color transparent transparent transparent;
}

@mixin absolutely-center($width, $height) { // should give dimensions of the item within the container
  position: absolute;
  top: 50%;
  left: 50%;
  margin: ($height / -2) 0 0 ($width / -2);
}

@mixin reset-appearance {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

@mixin default-list-bullets { // put this on a <ul>
  list-style-position: outside;
  list-style: disc;

  ul {
    list-style-position: outside;
    list-style: circle;
  }

  ul ul {
    list-style: square;
  }
}
